<template>
  <div class="shop">
    <div class="basic">
      <div class="top">
        <h2>{{ shopData.name }}</h2>
        <van-rate v-model="value" readonly />
        <div class="score">({{ shopData.score }})</div>
        <div class="sellCount">
          <h3>月售{{ shopData.sellCount }}单</h3>
        </div>
        <div class="collection">
          <van-icon name="like" class="like" />
          <h3>已收藏</h3>
        </div>
      </div>
      <van-divider />
      <div class="low df aic jcsb">
        <div class="box1 box">
          <h2 class="lowText">起送价</h2>
          <div class="content df aic jcc">
            {{ shopData.minPrice }}
            <h5>元</h5>
          </div>
        </div>
        <div class="box2 box">
          <h2 class="lowText">商家配送</h2>
          <div class="content df aic jcc">
            {{ shopData.deliveryPrice }}
            <h5>元</h5>
          </div>
        </div>
        <div class="box3 box">
          <h2 class="lowText">平均配送时间</h2>
          <div class="content df aic jcc">
            {{ shopData.deliveryTime }}
            <h5>分钟</h5>
          </div>
        </div>
      </div>
    </div>

    <div class="announcement">
      <div class="top-announcement">
        <h1>活动与公告</h1>
        <div class="bulletin">{{ shopData.bulletin }}</div>
      </div>
      <van-divider />
      <div class="low-announcement">
        <div class="info">
          <div class="reduce df">
            <van-tag type="danger">减</van-tag>
            <div class="supports">{{ shopData.supports }}</div>
          </div>
          <div class="reduce df">
            <van-tag type="primary">折</van-tag>
            <div class="supports">{{ shopData.supports }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
import {ref} from 'vue'
export default {
  setup() {
    const value = ref(5)
    return {value}
  },

  computed: {
    ...mapState('shop', ['shopData']),
  },
  methods: {
    ...mapActions('shop', ['A_getShopInfo']),
  },
  created() {
    //初始化发请求
    this.A_getShopInfo()
  },
}
</script>

<style lang="scss" scoped>
.basic {
  width: 100%;
  height: 320px;
  background: #fff;
  margin-top: 2px;
  padding: 35px;
  position: relative;
  box-sizing: border-box;
}
.van-rate {
  margin-top: 15px;
}
.score {
  position: absolute;
  top: 80px;
  left: 208px;
}
.sellCount {
  position: absolute;
  top: 80px;
  right: 168px;
}
.like {
  font-size: 30px;
  color: red;
  margin-left: 14px;
  margin-bottom: 5px;
}
.collection {
  width: 80px;
  position: absolute;
  top: 45px;
  right: 48px;
}
.top {
  width: 100%;
  height: 100px;
}
.van-divider {
  width: 465px;
  margin-left: 3px;
}
.lowText {
  color: #e6e6e6;
}
.content {
  font-size: 40px;
  text-align: center;
}
h5 {
  font-size: 18px;
}
.low {
  margin-top: 28px;
}
.content {
  margin-top: 8px;
}
.announcement {
  width: 100%;
  min-height: 200px;
  background: #fff;
  margin-top: 50px;
  padding: 35px;
}
.bulletin {
  margin-top: 15px;
  font-size: 24px;
  color: red;
}
.supports {
  margin-left: 5px;
}
.reduce {
  margin-bottom: 10px;
}
</style>
